<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="applicable-device" content="pc">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="keywords" content="">
		<meta name="description" content="">

		<link rel="icon" href="/icon.png" />
		
		<link rel="stylesheet" href="/static/index/lib/bootstrap.css">
		<link rel="stylesheet" href="/static/index/css/reset.css">

		<link rel="stylesheet" href="/static/index/css/common.css">
		<link rel="stylesheet" href="/static/index/css/login.css">

		<script src="/static/index/lib/jquery-2.1.4.js"></script>
		<script src="/static/index/lib/bootstrap.min.js"></script>
		<script src="/static/index/layer/layer.js"></script>
		<script type="text/javascript" src="/static/index/lib/template.js"></script>
		<script>
			var _hmt = _hmt || [];
			(function() {
			  var hm = document.createElement("script");
			  hm.src = "https://hm.baidu.com/hm.js?8b340ebdd740974de9d621b14ab09b43";
			  var s = document.getElementsByTagName("script")[0]; 
			  s.parentNode.insertBefore(hm, s);
			})();
		</script>
	</head>

	<body>
		{include file="public/push"}
		<div class="widthFullScreen loginHeaderContainer">
			<div class="wdSafe headerWrap clearfix">
				<img class="pull-left" style="height: 90px;width: auto;" src="https://img.qikuai100.com/logo.png" alt="">
				<a href="/" class="pull-left reginTitle">返回首页</a>
				<h3 class="pull-right tel_custorm">客服热线：<a href="tel:17343030506">17343030506</a></h3>
			</div>
		</div>

		<div class="widthFullScreen regin_box">
			<div class="wdSafe clearfix">
				<div class="regin_news">
					<div class="login_form regin_pd">
						<p class="login_title" style="padding-left: 30px;">欢迎注册</p>
						<form class="form-horizontal">
							<div class="form-group">
								<label for="phoneNum" class="col-sm-3 control-label">手机</label>
								<div class="col-sm-9">
									<input type="number" class="form-control" id="phoneNum" placeholder="请输入手机号码">
								</div>
							</div>
							<div class="form-group">
								<label for="password" class="col-sm-3 control-label">密码</label>
								<div class="col-sm-9">
									<input type="password" autocomplete='password' class="form-control" id="password" placeholder="请输入6位以上密码">
								</div>
							</div>
							<div class="form-group">
								<label for="repeatPassword" class="col-sm-3 control-label">确认密码</label>
								<div class="col-sm-9">
									<input type="password" autocomplete='password' class="form-control" id="repeatPassword" placeholder="请确认密码">
								</div>
							</div>
							<div class="form-group">
								<label for="codeNum" class="col-sm-3 control-label">验证码</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" id="codeNum" placeholder="请输入短信验证码">
								</div>
								<div class="col-sm-4">
									<input type="button" class="form-control codeStyle" id="sendCode" value="获取短信验证码">
								</div>
							</div>
							<div class="form-group text-center">
								<div class="col-sm-12">
									<div class="checkbox" style="font-size: 13px;">
										<label>
                                            <input id="checkBook" type="checkbox" checked="checked"> 我已阅读并同意<a href="/user/regAggre">《用户协议》</a>
                                        </label>
									</div>
								</div>
							</div>
							<div class="form-group" style="margin-bottom: 10px">
								<input type="button" id="reginBtn" value="立即注册" class="regin_in" name="" style="margin-bottom: 10px;">
							</div>
						</form>
						<div class="regin_note">已有账号，立即
							<a href="/user/login">登录</a>
						</div>

					</div>
				</div>
			</div>
		</div>
		{include file="public/footer"}
		<script type="text/javascript">
			var baseUrl = 'https://api.qikuai100.com/';
			var countdown = 60;
			$(function() {
				$('#sendCode').click(function() {
					sendCode();
				});
				$('#reginBtn').click(function() {
					regin();
				});
				
			});
			
			/**
			 * 发送验证码
			 * */
			function sendCode() {
				var phone = $("#phoneNum").val();
                var result = isPhoneNum();
                if(result){
                		$.ajax({
						type: "POST",
						url: baseUrl + "api/captcha/register",
						data: {
							"phone": phone
						},
						success: function(result) {
							if(result.ret == 0){
								settime($('#sendCode'));
							}
						}
					});
                }
			}
			
			// 注册
			function regin(){
				var checked = $('#checkBook').prop('checked'),
					phone = $("#phoneNum").val(),
					password1 = $("#password").val(),
					passwordRepeat = $("#repeatPassword").val(),
					codeNum = $("#codeNum").val();
				var result = isPhoneNum();
				if(checked == false){
					layer.msg("请同意用户协议");
					return;
				}
				if(!result){
					return;
				}
				if($.trim(password1) == ""){
					layer.msg("请输入密码");
					return;
				}
				if($.trim(password1).length < 6){
					layer.msg("请输入6位以上的密码");
					return;
				}
				if($.trim(passwordRepeat) != $.trim(password1)){
					layer.msg("两次输入密码不一致");
					return;
				}
				if($.trim(codeNum) == ""){
					layer.msg("请输入验证码");
					return;
				}
				$.ajax({
					type: "POST",
					url: baseUrl + "api/auth/register",
					data: {
						"phone": phone,
						"password": password1,
						"captcha": codeNum
					},
					success: function(result) {
						
						if(result.ret == 0){
							// uid 08087912c8935488000e8d6139f2647f
							console.log(result)
							localStorage.setItem("uid", result.data.uid);
							window.location.href = '/user/regSuccess';
						}else{
							layer.msg(result.res_info);
						}
					}
				});
			}
			
			// 倒计时
			function settime(obj) {
				if(countdown == 0) {
					obj.removeAttr("disabled"); 
					obj.val("获取验证码");
					return;
				} else {
					obj.attr("disabled", true);
					obj.val("重新发送(" + countdown + ")");
					countdown--;
				}
				setTimeout(function() {
					settime(obj);
				}, 1000)
			}
			
			//校验手机号是否合法
			function isPhoneNum() {
				var phone_1 = $("#phoneNum").val();
				var myreg = /^1[34578]\d{9}$/;
				if(!myreg.test(phone_1)) {
					layer.msg("请输入有效的手机号码");
					return false;
				} else {
					return true;
				}
			}
			
		</script>
	</body>

</html>